<!DOCTYPE html>
<html lang="en" ng-app="listenone">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title ng-bind="document_title">Listen 1</title>

    <link href="css/notyf.min.css" rel="stylesheet" />
    <link href="css/hotkeys.css" rel="stylesheet" />
    <link href="css/icon.css" rel="stylesheet" />

    <link href="css/origin.css" rel="stylesheet" id="theme" />
    <link href="css/common.css" rel="stylesheet" />

    <link href="images/logo_16.png" rel="shortcut icon" />
    <link href="images/logo_16.png" rel="bookmark" />
    <script>
      if (typeof module === 'object') {
        window.module = module;
        module = undefined;
      }
    </script>
    <script type="text/javascript" src="js/vendor/angular.min.js"></script>
    <script src="js/vendor/i18next.min.js"></script>
    <script src="js/vendor/i18nextHttpBackend.min.js"></script>
    <script
      type="text/javascript"
      src="js/vendor/forge_listen1_fork.min.js"
    ></script>
    <script type="text/javascript" src="js/vendor/axios.min.js"></script>
    <script type="text/javascript" src="js/vendor/notyf.min.js"></script>
    <script type="text/javascript" src="js/vendor/howler.core.min.js"></script>
    <script type="text/javascript" src="js/vendor/hotkeys.min.js"></script>
    <script type="text/javascript" src="js/vendor/async.min.js"></script>
    <script type="text/javascript" src="js/vendor/lru-cache.min.js"></script>

    <script type="text/javascript" src="js/lowebutil.js"></script>
    <script type="text/javascript" src="js/github.js"></script>
    <script type="text/javascript" src="js/lastfm.js"></script>
    <script type="text/javascript" src="js/provider/xiami.js"></script>
    <script type="text/javascript" src="js/provider/qq.js"></script>
    <script type="text/javascript" src="js/provider/netease.js"></script>
    <script type="text/javascript" src="js/provider/kugou.js"></script>
    <script type="text/javascript" src="js/provider/kuwo.js"></script>
    <script type="text/javascript" src="js/provider/bilibili.js"></script>
    <script type="text/javascript" src="js/provider/migu.js"></script>
    <script type="text/javascript" src="js/provider/taihe.js"></script>
    <script type="text/javascript" src="js/provider/localmusic.js"></script>

    <script type="text/javascript" src="js/bridge.js"></script>
    <script type="text/javascript" src="js/player_thread.js"></script>
    <script type="text/javascript" src="js/myplaylist.js"></script>
    <script type="text/javascript" src="js/loweb.js"></script>
    <script type="text/javascript" src="js/l1_player.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controller/profile.js"></script>
    <script type="text/javascript" src="js/controller/auth.js"></script>
    <script type="text/javascript" src="js/controller/navigation.js"></script>
    <script type="text/javascript" src="js/controller/my_playlist.js"></script>
    <script type="text/javascript" src="js/controller/platform.js"></script>
    <script type="text/javascript" src="js/controller/playlist.js"></script>
    <script type="text/javascript" src="js/controller/play.js"></script>
    <script
      type="text/javascript"
      src="js/controller/instant_search.js"
    ></script>

    <script>
      if (window.module) module = window.module;
    </script>
  </head>

  <body>
    <div
      id="feather-container"
      style="visibility: hidden; position: absolute; width: 0px; height: 0px"
    ></div>
    <div
      ng-controller="PlayController as playCtrl"
      ng-init="loadLocalSettings()"
    >
      <div ng-controller="AuthController" ng-init="refreshAuthStatus()">
        <div ng-controller="ProfileController" ng-init="initProfile()">
          <div ng-controller="NavigationController">
            <div class="wrap">
              <!-- dialog-->
              <div class="shadow" ng-hide="is_dialog_hidden==1"></div>
              <div
                class="dialog"
                ng-hide="is_dialog_hidden==1"
                ng-style="myStyle"
              >
                <div class="dialog-header">
                  <span>{{ dialog_title }}</span
                  ><span class="dialog-close" ng-click="closeDialog()">×</span>
                </div>
                <div class="dialog-body">
                  <!-- choose playlist dialog-->
                  <ul class="dialog-playlist" ng-show="dialog_type==0">
                    <li class="detail-add" ng-click="newDialogOption(1)">
                      <img src="images/mycover.jpg" />
                      <h2>{{_CREATE_PLAYLIST}}</h2>
                    </li>
                    <li
                      ng-repeat="playlist in myplaylist track by $index"
                      ng-class-odd="'odd'"
                      ng-class-even="'even'"
                      ng-click="chooseDialogOption(playlist.info.id)"
                    >
                      <img ng-src="{{ playlist.info.cover_img_url }}" />
                      <h2>{{ playlist.info.title }}</h2>
                    </li>
                  </ul>
                  <!-- create new playlist dialog-->
                  <div class="dialog-newplaylist" ng-show="dialog_type==1">
                    <input
                      class="form-control"
                      type="text"
                      placeholder="{{_INPUT_NEW_PLAYLIST_TITLE}}"
                      ng-model="newlist_title"
                    />
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="createAndAddPlaylist()"
                      >
                        {{_CONFIRM}}
                      </button>
                      <button
                        class="btn btn-default"
                        ng-click="cancelNewDialog(0)"
                      >
                        {{_CANCEL}}
                      </button>
                    </div>
                  </div>
                  <!-- edit playlist dialog-->
                  <div class="dialog-editplaylist" ng-show="dialog_type==3">
                    <div class="form-group">
                      <label>{{_PLAYLIST_TITLE}}</label>
                      <input
                        class="form-control"
                        type="text"
                        placeholder="{{_INPUT_PLAYLIST_TITLE}}"
                        ng-model="dialog_playlist_title"
                      />
                    </div>
                    <div class="form-group">
                      <label>{{_PLAYLIST_COVER_IMAGE_URL}}</label>
                      <input
                        class="form-control"
                        type="text"
                        placeholder="{{_INPUT_PLAYLIST_COVER_IMAGE_URL}}"
                        ng-model="dialog_cover_img_url"
                      />
                    </div>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="editMyPlaylist(list_id)"
                      >
                        {{_CONFIRM}}
                      </button>
                      <button class="btn btn-default" ng-click="closeDialog()">
                        {{_CANCEL}}
                      </button>
                    </div>
                    <div class="dialog-footer">
                      <button
                        class="btn btn-danger remove-button"
                        ng-click="removeMyPlaylist(list_id)"
                      >
                        {{_REMOVE_PLAYLIST}}
                      </button>
                    </div>
                  </div>
                  <div class="dialog-connect-lastfm" ng-show="dialog_type==4">
                    <p>{{_OPENING_LASTFM_PAGE}}</p>
                    <p>{{_CONFIRM_NOTICE_LASTFM}}</p>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="lastfm.updateStatus();closeDialog();"
                      >
                        {{_AUTHORIZED_FINISHED}}
                      </button>
                      <button
                        class="btn btn-warning warning-button"
                        ng-click="lastfm.getAuth();"
                      >
                        {{_AUTHORIZED_REOPEN}}
                      </button>
                    </div>
                  </div>
                  <!-- open playlist dialog-->
                  <div class="dialog-open-url" ng-show="dialog_type==5">
                    <div class="form-group">
                      <label>{{_PLAYLIST_LINK}}</label>
                      <input
                        class="form-control"
                        type="text"
                        placeholder="{{_EXAMPLE}}https://www.xiami.com/collect/198267231"
                        ng-model="dialog_url"
                      />
                    </div>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="openUrl(dialog_url);closeDialog();dialog_url='';"
                      >
                        {{_CONFIRM}}
                      </button>
                      <button class="btn btn-default" ng-click="closeDialog()">
                        {{_CANCEL}}
                      </button>
                    </div>
                  </div>
                  <ul class="dialog-merge-playlist" ng-show="dialog_type==6">
                    <li
                      ng-repeat="playlist in myplaylist track by $index"
                      ng-class-odd="'odd'"
                      ng-class-even="'even'"
                      ng-click="mergePlaylist(playlist.info.id)"
                    >
                      <img ng-src="{{ playlist.info.cover_img_url }}" />
                      <h2>{{ playlist.info.title }}</h2>
                    </li>
                  </ul>
                  <div class="dialog-connect-github" ng-show="dialog_type==7">
                    <p>{{_OPENING_GITHUB_PAGE}}</p>
                    <p>{{_CONFIRM_NOTICE_GITHUB}}</p>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="updateGithubStatus();closeDialog();"
                      >
                        {{_AUTHORIZED_FINISHED}}
                      </button>
                      <button
                        class="btn btn-warning warning-button"
                        ng-click="openGithubAuth();"
                      >
                        {{_AUTHORIZED_REOPEN}}
                      </button>
                    </div>
                  </div>
                  <ul class="dialog-backuplist" ng-show="dialog_type==8">
                    <li class="detail-add" ng-click="newDialogOption(9)">
                      <img src="images/mycover.jpg" />
                      <h2>{{_CREATE_PLAYLIST_BACKUP}}</h2>
                    </li>
                    <li
                      ng-repeat="backup in myBackup track by $index"
                      ng-class-odd="'odd'"
                      ng-class-even="'even'"
                      ng-click="backupMySettings2Gist(backup.id, backup.public); closeDialog();"
                    >
                      <img ng-src="images/mycover.jpg" />
                      <h2>
                        {{ backup.id }}<br />
                        {{backup.description}}
                      </h2>
                    </li>
                  </ul>
                  <!-- create new backup dialog-->
                  <div class="dialog-newbackup" ng-show="dialog_type==9">
                    <button
                      class="btn btn-primary confirm-button"
                      ng-click="backupMySettings2Gist(null, true);closeDialog();"
                    >
                      {{_CREATE_PUBLIC_BACKUP}}
                    </button>
                    <button
                      class="btn btn-primary confirm-button"
                      ng-click="backupMySettings2Gist(null, false);closeDialog();"
                    >
                      {{_CREATE_PRIVATE_BACKUP}}
                    </button>
                    <button
                      class="btn btn-default"
                      ng-click="cancelNewDialog(8)"
                    >
                      {{_CANCEL}}
                    </button>
                  </div>
                  <ul class="dialog-backuplist" ng-show="dialog_type==10">
                    <li
                      ng-repeat="backup in myBackup track by $index"
                      ng-class-odd="'odd'"
                      ng-class-even="'even'"
                      ng-click="importMySettingsFromGist(backup.id); closeDialog();"
                    >
                      <img ng-src="images/mycover.jpg" />
                      <h2>{{ backup.id }} {{backup.description}}</h2>
                    </li>
                  </ul>
                  <div class="dialog-open-login" ng-show="dialog_type==11">
                    <p>{{_LOGIN_DIALOG_NOTICE}}</p>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="closeDialog();refreshAuthStatus();"
                      >
                        {{_LOGIN_SUCCESS}}
                      </button>
                      <button
                        class="btn btn-warning warning-button"
                        ng-click="openLogin(dialog_data);"
                      >
                        {{_LOGIN_FAIL_RETRY}}
                      </button>
                    </div>
                  </div>
                  <div class="dialog-proxy" ng-show="dialog_type==12">
                    <select
                      ng-options="mode.displayText for mode in proxyModes"
                      ng-model="proxyModeInput"
                      ng-change="changeProxyMode(proxyModeInput)"
                    ></select>
                    <div
                      ng-show="proxyModeInput.name=='custom'"
                      class="custom-proxy"
                    >
                      <div class="rule-input">
                        <div class="field-name">{{_PROTOCOL}}</div>
                        <select
                          ng-options="protocol for protocol in proxyProtocols"
                          ng-model="proxyProtocol"
                          ng-change="changeProxyProtocol(proxyProtocol)"
                        ></select>
                        <div class="field-name">{{_HOST}}</div>
                        <input type="text" id="proxy-rules-host" />
                        <div class="field-name">{{_PORT}}</div>
                        <input type="text" id="proxy-rules-port" />
                      </div>
                    </div>
                    <div class="buttons">
                      <button
                        class="btn btn-primary confirm-button"
                        ng-click="setProxyConfig();closeDialog();"
                      >
                        {{_CONFIRM}}
                      </button>
                      <button
                        class="btn btn-warning warning-button"
                        ng-click="closeDialog();"
                      >
                        {{_CANCEL}}
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="main" ng-controller="MyPlayListController">
                <div class="sidebar">
                  <div class="flex-scroll-wrapper">
                    <div class="menu-control"></div>
                    <div class="menu-title">
                      <div class="title">{{_PLATFORM_UNION}}</div>
                    </div>
                    <ul class="nav masthead-nav">
                      <li
                        ng-class="{ 'active':(current_tag==2) && (window_url_stack.length ==0) }"
                        ng-click="showTag(2)"
                      >
                        <div class="sidebar-block">
                          <span class="icon li-featured-list"></span
                          ><a>{{_PLAYLISTS}}</a>
                        </div>
                      </li>
                    </ul>
                    <div
                      ng-if="!isChrome || is_login('netease') || is_login('qq')"
                      class="menu-title"
                    >
                      <div class="title">{{_MY_MUSIC}}</div>
                    </div>
                    <ul class="nav masthead-nav">
                      <li
                        ng-if="!isChrome"
                        ng-click="showPlaylist('lmplaylist_reserve')"
                        ng-class="{ 'active':window_type=='list' && ( '/playlist?list_id=lmplaylist_reserve' === getCurrentUrl() ) }"
                      >
                        <div class="sidebar-block">
                          <span class="icon li-featured-list"></span
                          ><a>{{_LOCAL_MUSIC}}</a>
                        </div>
                      </li>
                      <li
                        ng-if="is_login('netease')"
                        ng-click="showTag(6, {platform:'netease', user: musicAuth.netease});"
                        ng-class="{ 'active':(current_tag==6 && tag_params.platform=='netease') && (window_url_stack.length ==0) }"
                      >
                        <div class="sidebar-block">
                          <svg class="feather">
                            <use href="#globe"></use>
                          </svg>
                          <a>{{_MY_NETEASE}}</a>
                        </div>
                      </li>
                      <li
                        ng-if="is_login('qq')"
                        ng-click="showTag(6, {platform:'qq', user: musicAuth.qq});"
                        ng-class="{ 'active':(current_tag==6 && tag_params.platform=='qq') && (window_url_stack.length ==0) }"
                      >
                        <div class="sidebar-block">
                          <svg class="feather">
                            <use href="#globe"></use>
                          </svg>
                          <a>{{_MY_QQ}}</a>
                        </div>
                      </li>
                    </ul>
                    <div class="menu-title" ng-init="loadMyPlaylist();">
                      <div class="title">{{_CREATED_PLAYLIST}}</div>
                      <svg class="feather icon" ng-click="showDialog(5)">
                        <use href="#plus-square"></use>
                      </svg>
                    </div>
                    <ul class="nav masthead-nav">
                      <li
                        ng-repeat="i in myplaylists track by $index"
                        ng-class="{ 'active':window_type=='list' && ( ('/playlist?list_id='+i.info.id) === getCurrentUrl() ) }"
                        ng-click="showPlaylist(i.info.id)"
                        drag-drop-zone
                        drag-zone-type="'application/listen1-myplaylist'"
                        drop-zone-ondrop="onSidebarPlaylistDrop('my', i.info.id, arg1, arg2, arg3)"
                        draggable="true"
                        sortable="true"
                        drag-zone-object="i"
                        drag-zone-title="i.info.title"
                      >
                        <div class="sidebar-block">
                          <svg class="feather">
                            <use href="#disc"></use>
                          </svg>
                          <a>{{i.info.title}}</a>
                        </div>
                      </li>
                    </ul>
                    <div class="menu-title" ng-init="loadFavoritePlaylist();">
                      <div class="title">{{_FAVORITED_PLAYLIST}}</div>
                    </div>
                    <ul class="nav masthead-nav">
                      <li
                        ng-repeat="i in favoriteplaylists track by $index"
                        ng-class="{ 'active':window_type=='list' && ( ('/playlist?list_id='+i.info.id) === getCurrentUrl() ) }"
                        ng-click="showPlaylist(i.info.id, {useCache: false})"
                        drag-drop-zone
                        drag-zone-type="'application/listen1-favoriteplaylist'"
                        drop-zone-ondrop="onSidebarPlaylistDrop('favorite', i.info.id, arg1, arg2, arg3)"
                        draggable="true"
                        sortable="true"
                        drag-zone-object="i"
                        drag-zone-title="i.info.title"
                      >
                        <div class="sidebar-block">
                          <svg class="feather">
                            <use href="#disc"></use>
                          </svg>
                          <a>{{i.info.title}}</a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <div class="content" ng-controller="InstantSearchController">
                  <div class="navigation">
                    <div class="backfront">
                      <span class="icon li-back" ng-click="popWindow()"></span>
                      <span
                        class="icon li-advance"
                        ng-click="forwardWindow()"
                      ></span>
                    </div>
                    <div class="search">
                      <input
                        class="form-control search-input"
                        id="search-input"
                        type="text"
                        ng-model="keywords"
                        placeholder="{{_SEARCH_PLACEHOLDER}}"
                        ng-model-options="{debounce: 500}"
                        ng-keyup="enterEvent($event)"
                      />
                    </div>
                    <div
                      ng-class="{ 'active': (current_tag==4) && (window_url_stack.length ==0)}"
                      ng-click="showTag(5)"
                      class="settings"
                    >
                      <span class="icon">
                        <svg class="feather">
                          <use href="#users"></use>
                        </svg>
                      </span>
                    </div>
                    <div
                      ng-class="{ 'active': (current_tag==4) && (window_url_stack.length ==0)}"
                      ng-click="showTag(4)"
                      class="settings"
                    >
                      <span class="icon li-setting"></span>
                    </div>
                    <div ng-if="!isChrome && !isMac" class="window-control">
                      <svg class="icon" window-control="window_min">
                        <use href="#minimize-2"></use>
                      </svg>
                      <svg class="icon" window-control="window_max">
                        <use href="#maximize"></use>
                      </svg>
                      <svg class="icon" window-control="window_close">
                        <use href="#x"></use>
                      </svg>
                    </div>
                  </div>
                  <div
                    class="browser flex-scroll-wrapper"
                    infinite-scroll="scrolling()"
                    content-selector="'#playlist-content'"
                  >
                    <!-- hot playlist window-->
                    <div
                      class="page page-hot-playlist"
                      ng-show="current_tag==2 && is_window_hidden==1"
                      ng-controller="PlayListController"
                      ng-init="loadPlaylist();"
                    >
                      <div class="source-list" ng-show="is_window_hidden==1">
                        <div
                          ng-repeat-start="source in ::sourceList"
                          class="source-button"
                          ng-class="{'active':tab === source.name}"
                          ng-click="changeTab(source.name)"
                        >
                          {{source.displayText}}
                        </div>
                        <div
                          ng-repeat-end
                          ng-if="!$last"
                          class="splitter"
                        ></div>
                      </div>
                      <div class="playlist-filter">
                        <div
                          class="l1-button filter-item"
                          ng-repeat="filter in playlistFilters[tab] || []"
                          ng-click="changeFilter(filter.id)"
                          ng-class="{'active':filter.id === currentFilterId}"
                        >
                          {{filter.name}}
                        </div>
                        <div
                          class="l1-button filter-item"
                          ng-show="playlistFilters[tab] && playlistFilters[tab].length > 0"
                          ng-click="toggleMorePlaylists()"
                        >
                          更多...
                        </div>
                      </div>
                      <div class="all-playlist-filter" ng-show="showMore">
                        <div
                          ng-repeat="category in allPlaylistFilters[tab] || []"
                          class="category"
                        >
                          <div class="category-title">
                            {{category.category}}
                          </div>
                          <div class="category-filters">
                            <div
                              class="filter-item"
                              ng-repeat="filter in category.filters"
                            >
                              <span ng-click="changeFilter(filter.id)">
                                {{filter.name}}</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="site-wrapper-innerd" id="hotplaylist">
                        <div class="cover-container" id="playlist-content">
                          <ul class="playlist-covers">
                            <li ng-repeat="i in result ">
                              <div class="u-cover">
                                <img
                                  ng-src="{{i.cover_img_url}}"
                                  ng-click="showPlaylist(i.id)"
                                />
                                <div
                                  class="bottom"
                                  ng-click="directplaylist(i.id)"
                                >
                                  <svg class="feather">
                                    <use href="#play-circle"></use>
                                  </svg>
                                </div>
                              </div>
                              <div class="desc">
                                <span
                                  class="title"
                                  ng-click="showPlaylist(i.id)"
                                  >{{i.title}}</span
                                >
                              </div>
                            </li>
                            <!-- <div class="loading_bottom">
                              <img src="images/loading-1.gif" height="40px" />
                            </div> -->
                          </ul>
                        </div>
                      </div>
                    </div>
                    <!-- my platform window-->
                    <div
                      class="page page-hot-playlist"
                      ng-show="current_tag==6 && is_window_hidden==1"
                      ng-controller="PlatformController"
                    >
                      <div class="source-list" ng-show="is_window_hidden==1">
                        <div
                          ng-repeat-start="source in ::platformSourceList"
                          class="source-button"
                          ng-class="{'active':tab === source.name}"
                          ng-click="changeTab(source.name)"
                        >
                          {{source.displayText}}
                        </div>
                        <div
                          ng-repeat-end
                          ng-if="!$last"
                          class="splitter"
                        ></div>
                      </div>
                      <div class="site-wrapper-innerd" id="hotplaylist">
                        <div class="cover-container" id="playlist-content">
                          <ul class="playlist-covers">
                            <li ng-repeat="i in myPlatformPlaylists">
                              <div class="u-cover">
                                <img
                                  ng-src="{{i.cover_img_url}}"
                                  ng-click="showPlaylist(i.id)"
                                />
                                <div
                                  class="bottom"
                                  ng-click="directplaylist(i.id)"
                                >
                                  <svg class="feather">
                                    <use href="#play-circle"></use>
                                  </svg>
                                </div>
                              </div>
                              <div class="desc">
                                <span
                                  class="title"
                                  ng-click="showPlaylist(i.id)"
                                  >{{i.title}}</span
                                >
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>

                    <!-- content page: 快速搜索 -->
                    <div
                      class="page"
                      ng-show="current_tag==3 && is_window_hidden==1"
                    >
                      <div class="site-wrapper-innerd">
                        <div class="cover-container">
                          <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
                          <div class="searchbox">
                            <ul class="source-list">
                              <li
                                class="source-button"
                                ng-class="{'active':tab === 'allmusic'}"
                                ng-click="changeSourceTab('allmusic')"
                              >
                                <a>{{_ALL_MUSIC}}(Beta)</a>
                              </li>
                              <div class="splitter"></div>
                              <div
                                ng-repeat-start="source in ::sourceList"
                                class="source-button"
                                ng-class="{'active':tab === source.name}"
                                ng-click="changeSourceTab(source.name)"
                              >
                                {{source.displayText}}
                              </div>
                              <div
                                ng-repeat-end
                                ng-if="!$last"
                                class="splitter"
                              ></div>
                              <svg
                                class="searchspinner"
                                ng-show="loading"
                                version="1.1"
                                id="loader-1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px"
                                y="0px"
                                width="40px"
                                height="40px"
                                viewBox="0 0 40 40"
                                enable-background="new 0 0 40 40"
                                xml:space="preserve"
                              >
                                <path
                                  opacity="0.2"
                                  fill="#000"
                                  d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
                                />
                                <path
                                  fill="#000"
                                  d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"
                                >
                                  <animateTransform
                                    attributeType="xml"
                                    attributeName="transform"
                                    type="rotate"
                                    from="0 20 20"
                                    to="360 20 20"
                                    dur="0.6s"
                                    repeatCount="indefinite"
                                  />
                                </path>
                              </svg>
                              <div class="search-type">
                                <li
                                  class="source-button"
                                  ng-class="{'active':isSearchType(0)}"
                                  ng-click="changeSearchType(0)"
                                >
                                  <a>单曲</a>
                                </li>
                                <div class="splitter"></div>
                                <li
                                  class="source-button"
                                  ng-class="{'active':isSearchType(1)}"
                                  ng-click="changeSearchType(1)"
                                >
                                  <a>歌单</a>
                                </li>
                              </div>
                            </ul>
                            <ul class="detail-songlist">
                              <li class="head" ng-if="searchType===0 ">
                                <div class="title"><a>{{_SONGS}}</a></div>
                                <div class="artist"><a>{{_ARTISTS}}</a></div>
                                <div class="album"><a>{{_ALBUMS}}</a></div>
                                <div class="tools">{{_OPERATION}}</div>
                              </li>
                              <li class="head" ng-if="searchType===1 ">
                                <div class="title">
                                  <a>{{_PLAYLIST_TITLE}}</a>
                                </div>
                                <div class="artist">
                                  <a>{{_PLAYLIST_AUTHOR}}</a>
                                </div>
                                <div class="album">
                                  <a>{{_PLAYLIST_SONG_COUNT}}</a>
                                </div>
                              </li>
                              <li
                                ng-if="searchType===0"
                                ng-repeat="song in result"
                                ng-class-odd="'odd'"
                                ng-class-even="'even'"
                                ng-mouseenter="options=true"
                                ng-mouseleave="options=false"
                              >
                                <div class="title">
                                  <!-- <a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title |limitTo:30}}</a> -->
                                  <a add-and-play="song"
                                    ><span
                                      ng-if="isActiveTab('allmusic')"
                                      class="source"
                                      >{{song.sourceName}}</span
                                    >{{ song.title |limitTo:30}}</a
                                  >
                                </div>
                                <div class="artist">
                                  <a ng-click="showPlaylist(song.artist_id)"
                                    >{{ song.artist |limitTo:20}}</a
                                  >
                                </div>
                                <div class="album">
                                  <a ng-click="showPlaylist(song.album_id)"
                                    >{{ song.album |limitTo:30}}</a
                                  >
                                </div>

                                <div class="tools">
                                  <a
                                    title="{{_ADD_TO_QUEUE}}"
                                    class="detail-add-button"
                                    add-without-play="song"
                                    ng-show="options"
                                    ><span class="icon li-add"></span
                                  ></a>
                                  <a
                                    title="{{_ADD_TO_PLAYLIST}}"
                                    class="detail-fav-button"
                                    ng-show="options"
                                    ng-click="showDialog(0, song)"
                                    ><span class="icon li-songlist"></span
                                  ></a>
                                  <a
                                    title="{{_REMOVE_FROM_PLAYLIST}}"
                                    class="detail-delete-button"
                                    ng-click="removeSongFromPlaylist(song, list_id)"
                                    ng-show="options && is_mine=='1' "
                                    ><span class="icon li-del"></span
                                  ></a>
                                  <a
                                    title="{{_ORIGIN_LINK}}"
                                    class="source-button"
                                    open-url="song.source_url"
                                    ng-show="options"
                                    ><span class="icon li-link"></span
                                  ></a>
                                </div>
                              </li>
                              <li
                                ng-if="searchType===1"
                                ng-repeat="playlist in result"
                                ng-class-odd="'odd'"
                                ng-class-even="'even'"
                                class="playlist-result"
                              >
                                <div class="title">
                                  <a ng-click="showPlaylist(playlist.id)">
                                    <img
                                      ng-src="{{ playlist.img_url }}"
                                      err-src="https://y.gtimg.cn/mediastyle/global/img/playlist_300.png"
                                    />
                                    <div>
                                      {{ playlist.title |limitTo:30}}<span
                                        ng-if="isActiveTab('allmusic')"
                                        class="source playlist"
                                        >{{playlist.sourceName}}</span
                                      >
                                    </div>
                                  </a>
                                </div>
                                <div class="artist">
                                  {{ playlist.author |limitTo:20}}
                                </div>
                                <div class="album">
                                  {{ playlist.count |limitTo:30}}
                                </div>
                              </li>
                            </ul>
                            <div
                              class="search-pagination"
                              ng-show="totalpage>1"
                              pagination
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- content page: 设置 -->
                    <div
                      class="page"
                      ng-show="current_tag==4 && is_window_hidden==1"
                      ng-init="lastfm.updateStatus(); updateGithubStatus();"
                    >
                      <div class="site-wrapper-innerd">
                        <div class="cover-container">
                          <div class="settings-title">
                            <span>{{_LANGUAGE}}</span>
                          </div>
                          <div class="settings-content">
                            <div>
                              <button
                                class="language-button"
                                ng-click="setLang('zh-CN')"
                              >
                                简体中文
                              </button>
                              <button
                                class="language-button"
                                ng-click="setLang('zh-TC')"
                              >
                                繁体中文
                              </button>
                              <button
                                class="language-button"
                                ng-click="setLang('en-US')"
                              >
                                English
                              </button>
                              <button
                                class="language-button"
                                ng-click="setLang('fr-FR')"
                              >
                                French
                              </button>
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_THEME}}</span>
                          </div>
                          <div class="settings-content">
                            <div>
                              <button
                                class="theme-button"
                                ng-click="setTheme('white')"
                              >
                                {{_THEME_WHITE}}
                              </button>
                              <button
                                class="theme-button"
                                ng-click="setTheme('black')"
                              >
                                {{_THEME_BLACK}}
                              </button>
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_AUTO_CHOOSE_SOURCE}}</span>
                          </div>
                          <div class="settings-content">
                            <div
                              class="shortcut"
                              class="btn btn-primary confirm-button"
                            >
                              <svg
                                class="feather"
                                ng-show="!enableAutoChooseSource"
                                ng-click="setAutoChooseSource(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableAutoChooseSource"
                                ng-click="setAutoChooseSource(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              {{_AUTO_CHOOSE_SOURCE_NOTICE}}
                            </div>
                            <div
                              class="search-description"
                              ng-show="enableAutoChooseSource"
                            >
                              {{_AUTO_CHOOSE_SOURCE_LIST}}
                            </div>
                            <div
                              class="search-source-list"
                              ng-show="enableAutoChooseSource"
                            >
                              <div
                                ng-repeat="item in sourceList"
                                class="search-source"
                              >
                                <svg
                                  class="feather"
                                  ng-show="autoChooseSourceList.indexOf(item.name) === -1"
                                  ng-click="enableSource(item.name)"
                                >
                                  <use href="#square"></use>
                                </svg>
                                <svg
                                  class="feather"
                                  ng-show="autoChooseSourceList.indexOf(item.name) > -1"
                                  ng-click="disableSource(item.name)"
                                >
                                  <use href="#check-square"></use>
                                </svg>
                                {{item.displayText}}
                              </div>
                            </div>
                          </div>
                          <div ng-if="isChrome" class="settings-title">
                            <span
                              >{{_CLOSE_TAB_ACTION}}({{_VALID_AFTER_RESTART}})</span
                            >
                          </div>
                          <div ng-if="isChrome" class="settings-content">
                            <div class="shortcut">
                              <svg
                                class="feather"
                                ng-show="!enableStopWhenClose"
                                ng-click="setStopWhenClose(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableStopWhenClose"
                                ng-click="setStopWhenClose(false)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              <span style="margin-right: 20px"
                                >{{_QUIT_APPLICATION}}</span
                              >
                              <svg
                                class="feather"
                                ng-show="enableStopWhenClose"
                                ng-click="setStopWhenClose(false)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="!enableStopWhenClose"
                                ng-click="setStopWhenClose(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              <span> {{_MINIMIZE_TO_BACKGROUND}}</span>
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_NOWPLAYING_DISPLAY}}</span>
                          </div>
                          <div class="settings-content">
                            <div class="shortcut">
                              <svg
                                class="feather"
                                ng-show="!enableNowplayingCoverBackground"
                                ng-click="setNowplayingCoverBackground(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableNowplayingCoverBackground"
                                ng-click="setNowplayingCoverBackground(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              {{_NOWPLAYING_COVER_BACKGROUND_NOTICE}}
                            </div>
                            <div class="shortcut">
                              <svg
                                class="feather"
                                ng-show="!enableNowplayingBitrate"
                                ng-click="setNowplayingBitrate(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableNowplayingBitrate"
                                ng-click="setNowplayingBitrate(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              {{_NOWPLAYING_BITRATE_NOTICE}}
                            </div>
                            <div class="shortcut">
                              <svg
                                class="feather"
                                ng-show="!enableNowplayingPlatform"
                                ng-click="setNowplayingPlatform(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableNowplayingPlatform"
                                ng-click="setNowplayingPlatform(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              {{_NOWPLAYING_PLATFORM_NOTICE}}
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_LYRIC_DISPLAY}}</span>
                          </div>
                          <div class="settings-content">
                            <div class="shortcut" ng-if="!isChrome">
                              <svg
                                class="feather"
                                ng-show="!enableLyricFloatingWindow"
                                ng-click="openLyricFloatingWindow(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableLyricFloatingWindow"
                                ng-click="openLyricFloatingWindow(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              <span ng-show="enableLyricFloatingWindow"></span
                              >{{_SHOW_DESKTOP_LYRIC}}
                            </div>
                            <div class="shortcut">
                              <svg
                                class="feather"
                                ng-show="!enableLyricTranslation"
                                ng-click="toggleLyricTranslation()"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableLyricTranslation"
                                ng-click="toggleLyricTranslation()"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              <span ng-show="enableLyricTranslation"></span
                              >{{_SHOW_LYRIC_TRANSLATION}}
                            </div>
                            <div class="shortcut" ng-if="!isChrome">
                              <svg
                                class="feather"
                                ng-show="!enableLyricFloatingWindowTranslation"
                                ng-click="toggleLyricFloatingWindowTranslation()"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableLyricFloatingWindowTranslation"
                                ng-click="toggleLyricFloatingWindowTranslation()"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              <span
                                ng-show="enableLyricFloatingWindowTranslation"
                              ></span
                              >{{_SHOW_DESKTOP_LYRIC_TRANSLATION}}
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_BACKUP_PLAYLIST}}</span>
                          </div>
                          <div class="settings-content">
                            <p>{{_BACKUP_WARNING}}</p>
                            <div>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-click="backupMySettings()"
                              >
                                {{_EXPORT_TO_LOCAL_FILE}}
                              </button>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-show="githubStatus == 2"
                                ng-click="showDialog(8)"
                              >
                                {{_EXPORT_TO_GITHUB_GIST}}
                              </button>
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_RECOVER_PLAYLIST}}</span>
                          </div>
                          <div class="settings-content">
                            <p>{{_RECOVER_WARNING}}</p>
                            <label class="upload-button" for="my-file-selector">
                              <input
                                id="my-file-selector"
                                type="file"
                                style="display: none"
                                ng-model="myuploadfiles"
                                custom-on-change="importMySettings"
                              />{{_RECOVER_FROM_LOCAL_FILE}}
                            </label>
                            <button
                              class="btn btn-warning confirm-button"
                              ng-show="githubStatus == 2"
                              ng-click="showDialog(10)"
                            >
                              {{_RECOVER_FROM_GITHUB_GIST}}
                            </button>
                          </div>

                          <div class="settings-title">
                            <span>{{_CONNECT_TO_GITHUB}}</span>
                          </div>
                          <div class="settings-content">
                            <div>
                              <p>{{_STATUS}}：{{ githubStatusText }}</p>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-show="githubStatus == 0"
                                ng-click="openGithubAuth(); showDialog(7);"
                              >
                                {{_CONNECT_TO_GITHUB}}
                              </button>
                              <button
                                class="btn btn-warning confirm-button"
                                ng-show="githubStatus == 1"
                                ng-click="showDialog(7);"
                              >
                                {{_RECONNECT}}
                              </button>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-show="githubStatus == 2"
                                ng-click="GithubLogout();"
                              >
                                {{_CANCEL_CONNECT}}
                              </button>
                            </div>
                          </div>

                          <div class="settings-title">
                            <span>{{_CONNECT_TO_LASTFM}}</span>
                          </div>
                          <div class="settings-content">
                            <div>
                              <p>{{_STATUS}}：{{ lastfm.getStatusText() }}</p>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-show="!lastfm.isAuthRequested()"
                                ng-click="lastfm.getAuth(); showDialog(4);"
                              >
                                {{_CONNECT_TO_LASTFM}}
                              </button>
                              <button
                                class="btn btn-warning confirm-button"
                                ng-show="lastfm.isAuthRequested() && !lastfm.isAuthorized()"
                                ng-click="lastfm.getAuth(); showDialog(4);"
                              >
                                {{_RECONNECT}}
                              </button>
                              <button
                                class="btn btn-primary confirm-button"
                                ng-show="lastfm.isAuthRequested()"
                                ng-click="lastfm.cancelAuth();"
                              >
                                {{_CANCEL_CONNECT}}
                              </button>
                            </div>
                          </div>
                          <div class="settings-title">
                            <span>{{_SHORTCUTS}}</span>
                          </div>
                          <div class="settings-content">
                            <div class="shortcut_table">
                              <div class="shortcut_table-header">
                                <div class="shortcut_table-function">
                                  {{_SHORTCUTS_FUNCTION}}
                                </div>
                                <div class="shortcut_table-key">
                                  {{_SHORTCUTS}}
                                </div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  {{_GLOBAL_SHORTCUTS}}
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_PLAY_OR_PAUSE}}
                                </div>
                                <div class="shortcut_table-key">p</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  Ctrl(Cmd) + Alt + {{_KEYBOARD_SPACE}}
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_PREVIOUS_TRACK}}
                                </div>
                                <div class="shortcut_table-key">[</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  Ctrl(Cmd) + Alt + ←
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_NEXT_TRACK}}
                                </div>
                                <div class="shortcut_table-key">]</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  Ctrl(Cmd) + Alt + →
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_VOLUME_UP}}
                                </div>
                                <div class="shortcut_table-key">u</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  {{_SHORTCUTS_NOT_SET}}
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_VOLUME_DOWN}}
                                </div>
                                <div class="shortcut_table-key">d</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  {{_SHORTCUTS_NOT_SET}}
                                </div>
                              </div>
                              <!-- <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  静音/取消静音
                                </div>
                                <div class="shortcut_table-key">m</div>
                                <div ng-if="!isChrome" class="shortcut_table-globalkey">
                                  全局快捷键
                                </div>
                              </div> -->
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  {{_QUICK_SEARCH}}
                                </div>
                                <div class="shortcut_table-key">f</div>
                                <div
                                  ng-if="!isChrome"
                                  class="shortcut_table-globalkey"
                                >
                                  {{_SHORTCUTS_NOT_SET}}
                                </div>
                              </div>
                              <!-- <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  打开/关闭播放列表
                                </div>
                                <div class="shortcut_table-key">l</div>
                                <div ng-if="!isChrome" class="shortcut_table-globalkey">
                                  全局快捷键
                                </div>
                              </div>
                              <div class="shortcut_table-line">
                                <div class="shortcut_table-function">
                                  切换播放模式
                                </div>
                                <div class="shortcut_table-key">s</div>
                                <div ng-if="!isChrome" class="shortcut_table-globalkey">
                                  全局快捷键
                                </div>
                              </div> -->
                            </div>
                            <div
                              class="shortcut"
                              ng-if="!isChrome"
                              class="btn btn-primary confirm-button"
                            >
                              <svg
                                class="feather"
                                ng-show="!enableGlobalShortCut"
                                ng-click="applyGlobalShortcut(true)"
                              >
                                <use href="#square"></use>
                              </svg>
                              <svg
                                class="feather"
                                ng-show="enableGlobalShortCut"
                                ng-click="applyGlobalShortcut(true)"
                              >
                                <use href="#check-square"></use>
                              </svg>
                              {{_GLOBAL_SHORTCUTS_NOTICE}}
                            </div>
                          </div>
                          <div class="settings-title" ng-if="!isChrome">
                            <span>{{_PROXY_CONFIG}}</span>
                          </div>
                          <div class="settings-content" ng-if="!isChrome">
                            <span>{{_PROXY_CONFIG}}:</span>
                            {{proxyMode.displayText}}
                            <span ng-show="proxyMode.name=='custom'"
                              >{{proxyRules}}</span
                            >
                            <button ng-click="showDialog(12)">
                              {{_MODIFY}}
                            </button>
                          </div>
                          <div class="settings-title">
                            <span>{{_ABOUT}}</span>
                          </div>
                          <div class="settings-content">
                            <p>
                              Listen 1 {{_HOMEPAGE}}:
                              <a
                                open-url="'https://listen1.github.io/listen1/'"
                              >
                                https://listen1.github.io/listen1/
                              </a>
                            </p>
                            <p>Listen 1 {{_EMAIL}}: githublisten1@gmail.com</p>
                            <p>
                              {{_FEEDBACK}}:
                              <a
                                ng-if="isChrome"
                                open-url="'https://github.com/listen1/listen1_chrome_extension/issues'"
                                >https://github.com/listen1/listen1_chrome_extension/issues</a
                              >
                              <a
                                ng-if="!isChrome"
                                open-url="'https://github.com/listen1/listen1_desktop/issues'"
                                >https://github.com/listen1/listen1_desktop/issues</a
                              >
                            </p>
                            <p>{{_DESIGNER}}: iparanoid</p>
                            <p>{{_VERSION}}: v2.21.5 {{_LICENSE_NOTICE}}</p>
                            <p ng-show='lastestVersion!=""'>
                              {{_LATEST_VERSION}}: {{lastestVersion}}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- content page: 登录 -->
                    <div
                      class="page"
                      ng-show="current_tag==5 && is_window_hidden==1"
                    >
                      <div class="login">
                        <div ng-repeat="source in loginSourceList">
                          <div ng-show="is_login(source)">
                            <div class="usercard">
                              <img ng-src="{{musicAuth[source].avatar}}" />
                              <div class="usercard-title">
                                <div class="usercard-nickname">
                                  {{musicAuth[source].nickname}}
                                </div>
                                <div class="usercard-info">{{source}}</div>
                              </div>
                              <button ng-click="logout(source)">
                                {{_LOGOUT}}
                              </button>
                            </div>
                          </div>
                          <div ng-show="!is_login(source)">
                            <div class="usercard">
                              <img src="images/placeholder.png" />

                              <div class="usercard-title">
                                <div class="usercard-nickname">
                                  {{_NOT_LOGIN_NICKNAME}}
                                </div>
                                <div class="usercard-info">{{source}}</div>
                              </div>

                              <button
                                ng-click=" openLogin(source);showDialog(11, source);"
                              >
                                {{_LOGIN}}
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- track list window-->
                    <div class="page">
                      <div
                        class="playlist-detail"
                        ng-show="is_window_hidden!=1 && window_type=='list'"
                      >
                        <div class="detail-head">
                          <div class="detail-head-cover">
                            <img
                              ng-src="{{ cover_img_url }}"
                              err-src="https://y.gtimg.cn/mediastyle/global/img/singer_300.png"
                            />
                          </div>
                          <div class="detail-head-title">
                            <h2>{{ playlist_title }}</h2>
                            <div class="playlist-button-list">
                              <div class="playlist-button playadd-button">
                                <div
                                  class="play-list"
                                  ng-click="playMylist(list_id)"
                                >
                                  <span class="icon li-play-s"></span>
                                  {{_PLAY_ALL}}
                                </div>
                                <div
                                  class="add-list"
                                  ng-click="addMylist(list_id)"
                                >
                                  <span class="icon li-add"></span>
                                </div>
                              </div>
                              <div
                                class="playlist-button clone-button"
                                ng-show="is_local"
                                ng-click="addLocalMusic(list_id)"
                              >
                                <div class="play-list">
                                  <span class="icon li-songlist"></span
                                  ><span>{{_ADD_LOCAL_SONGS}}</span>
                                </div>
                              </div>
                              <div
                                class="playlist-button clone-button"
                                ng-show="!is_mine && !is_local"
                                ng-click="clonePlaylist(list_id)"
                              >
                                <div class="play-list">
                                  <span class="icon li-songlist"></span
                                  ><span>{{_ADD_TO_PLAYLIST}}</span>
                                </div>
                              </div>
                              <div
                                class="playlist-button edit-button"
                                ng-show="is_mine && !is_local"
                                ng-click="showDialog(3, {list_id: list_id, playlist_title: playlist_title, cover_img_url: cover_img_url})"
                              >
                                <div class="play-list">
                                  <svg class="feather">
                                    <use href="#edit"></use>
                                  </svg>
                                  <span>{{_EDIT}}</span>
                                </div>
                              </div>
                              <div
                                class="playlist-button fav-button"
                                ng-show="!is_mine && !is_local"
                                ng-click="favoritePlaylist(list_id)"
                              >
                                <div
                                  class="play-list"
                                  ng-class="{'favorited':is_favorite,'notfavorite':!is_favorite}"
                                >
                                  <svg class="feather">
                                    <use href="#star"></use>
                                  </svg>
                                  <span
                                    >{{is_favorite?_FAVORITED:_FAVORITE}}</span
                                  >
                                </div>
                              </div>
                              <div
                                class="playlist-button edit-button"
                                ng-show="isChrome && is_favorite && !is_local"
                                ng-click="closeWindow();showPlaylist(list_id)"
                              >
                                <div class="play-list">
                                  <span class="icon li-loop"></span
                                  ><span>{{_REFRESH_PLAYLIST}}</span>
                                </div>
                              </div>
                              <div
                                class="playlist-button edit-button"
                                ng-show="!is_mine && !is_local"
                                open-url="playlist_source_url"
                              >
                                <div class="play-list">
                                  <span class="icon li-link"></span
                                  ><span>{{_ORIGIN_LINK}}</span>
                                </div>
                              </div>
                              <div
                                class="playlist-button edit-button"
                                ng-show="is_mine && !is_local"
                                ng-click="showDialog(6)"
                              >
                                <div class="play-list">
                                  <svg class="feather">
                                    <use href="#git-merge"></use>
                                  </svg>
                                  <span>{{_IMPORT}}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <ul class="detail-songlist">
                          <div class="playlist-search">
                            <svg class="feather playlist-search-icon">
                              <use href="#search"></use>
                            </svg>
                            <svg
                              class="feather playlist-clear-icon"
                              ng-show="playlistFilter.key!=''"
                              ng-click="clearFilter()"
                            >
                              <use href="#x"></use>
                            </svg>
                            <input
                              class="playlist-search-input"
                              type="text"
                              ng-model="playlistFilter.key"
                              placeholder="{{_SEARCH_PLAYLIST}}"
                            />
                          </div>
                          <li class="head">
                            <div class="title">
                              <a>{{_SONGS + '(' + songs.length + ')'}}</a>
                            </div>
                            <div class="artist"><a>{{_ARTISTS}}</a></div>
                            <div class="album"><a>{{_ALBUMS}}</a></div>
                            <div class="tools">{{_OPERATION}}</div>
                          </li>
                          <li
                            ng-repeat="song in songs | filter: fieldFilter track by $index"
                            ng-class-odd="'odd'"
                            ng-class-even="'even'"
                            ng-mouseenter="options=true"
                            ng-mouseleave="options=false"
                            draggable="true"
                            drag-drop-zone
                            drag-zone-object="song"
                            drag-zone-title="song.title"
                            sortable="is_mine || is_local"
                            drag-zone-type="'application/listen1-song'"
                            drop-zone-ondrop="onPlaylistSongDrop(list_id, song, arg1, arg2, arg3)"
                          >
                            <div class="title">
                              <!-- <a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()">{{ song.title }}</a> -->
                              <a add-and-play="song">{{ song.title }}</a>
                            </div>
                            <div class="artist">
                              <a ng-click="showPlaylist(song.artist_id)"
                                >{{ song.artist }}</a
                              >
                            </div>
                            <div class="album">
                              <a ng-click="showPlaylist(song.album_id)"
                                >{{ song.album }}</a
                              >
                            </div>
                            <div class="tools">
                              <a
                                title="{{_ADD_TO_QUEUE}}"
                                class="detail-add-button"
                                add-without-play="song"
                                ng-show="options"
                                ><span class="icon li-add"></span
                              ></a>
                              <a
                                title="{{_ADD_TO_PLAYLIST}}"
                                class="detail-fav-button"
                                ng-show="options"
                                ng-click="showDialog(0, song)"
                                ><span class="icon li-songlist"></span
                              ></a>
                              <a
                                title="{{_REMOVE_FROM_PLAYLIST}}"
                                class="detail-delete-button"
                                ng-click="removeSongFromPlaylist(song, list_id)"
                                ng-show="options && (is_mine=='1'||is_local) "
                                ><span class="icon li-del"></span
                              ></a>
                              <a
                                title="{{_ORIGIN_LINK}}"
                                class="source-button"
                                open-url="song.source_url"
                                ng-show="options && !is_local"
                                ><span class="icon li-link"></span
                              ></a>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <!-- now playing window-->
                      <div
                        class="songdetail-wrapper"
                        ng-class="{slidedown: window_type!=='track', coverbg: enableNowplayingCoverBackground}"
                      >
                        <div class="draggable-zone"></div>
                        <div
                          ng-if="enableNowplayingCoverBackground"
                          class="bg"
                          ng-style="{'background-image': 'url(' + currentPlaying.img_url + ')'}"
                        ></div>
                        <div
                          class="translate-switch"
                          ng-click="toggleLyricTranslation()"
                          ng-class="{selected: enableLyricTranslation}"
                        >
                          译
                        </div>
                        <div
                          class="close"
                          ng-class="isMac? 'mac':'' "
                          ng-click="popWindow()"
                        >
                          <svg class="icon">
                            <use href="#chevron-down"></use>
                          </svg>
                        </div>

                        <div ng-if="!isChrome && !isMac" class="window-control">
                          <svg class="icon" window-control="window_min">
                            <use href="#minimize-2"></use>
                          </svg>
                          <svg class="icon" window-control="window_max">
                            <use href="#maximize"></use>
                          </svg>
                          <svg class="icon" window-control="window_close">
                            <use href="#x"></use>
                          </svg>
                        </div>

                        <div class="playsong-detail">
                          <div class="detail-head">
                            <div class="detail-head-cover">
                              <img
                                ng-src="{{ currentPlaying.img_url  }}"
                                err-src="https://y.gtimg.cn/mediastyle/global/img/album_300.png"
                              />
                            </div>
                            <div class="detail-head-title">
                              <!--<a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
                <a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a>-->
                            </div>
                          </div>
                          <div class="detail-songinfo">
                            <div class="title">
                              <h2>{{ currentPlaying.title }}</h2>
                              <span
                                class="badge"
                                ng-if="enableNowplayingBitrate && currentPlaying.bitrate !== undefined"
                                >{{ currentPlaying.bitrate }}</span
                              >
                              <span
                                class="badge platform"
                                ng-if="enableNowplayingPlatform && currentPlaying.platform !== undefined"
                                >{{ currentPlaying.platformText }}</span
                              >
                            </div>
                            <div class="info">
                              <div class="singer">
                                <span>{{_ARTIST}}： </span
                                ><a
                                  ng-click="showPlaylist(currentPlaying.artist_id)"
                                  title="{{currentPlaying.artist}}"
                                  >{{ currentPlaying.artist }}</a
                                >
                              </div>
                              <div class="album">
                                <span>{{_ALBUM}}： </span
                                ><a
                                  ng-click="showPlaylist(currentPlaying.album_id)"
                                  title="{{currentPlaying.album}}"
                                  >{{ currentPlaying.album }}</a
                                >
                              </div>
                            </div>
                            <div class="lyric">
                              <div class="placeholder"></div>
                              <p
                                ng-repeat="line in lyricArray track by $index"
                                data-line="{{line.lineNumber}}"
                                ng-class="{ 'highlight': (line.lineNumber == lyricLineNumber) || (line.lineNumber == lyricLineNumberTrans) , hide: (line.translationFlag && !enableLyricTranslation), translate: line.translationFlag}"
                              >
                                {{ line.content }}
                              </p>
                              <div class="placeholder"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="left-control">
                  <span class="icon li-previous" prev-track=""></span>
                  <span
                    class="icon li-play play"
                    ng-class="isPlaying? 'li-pause': 'li-play'"
                    play-pause-toggle=""
                  ></span>
                  <span class="icon li-next" next-track=""></span>
                </div>
                <div class="main-info">
                  <div class="logo-banner" ng-if="playlist.length == 0">
                    <svg
                      class="logo"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="#666666"
                      stroke="#666666"
                      stroke-width="1"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polygon
                        points="7 4 7 19 16 19 16 16 10 16 10 4"
                      ></polygon>
                      <polygon points="13 4 13 13 16 13 16 4"></polygon>
                    </svg>
                  </div>
                  <div
                    class="cover"
                    class="cover"
                    ng-if="playlist.length > 0"
                    ng-click="toggleNowPlaying()"
                  >
                    <img
                      ng-src="{{ currentPlaying.img_url }}"
                      err-src="https://y.gtimg.cn/mediastyle/global/img/album_300.png"
                    />
                    <div class="mask">
                      <svg class="feather">
                        <use href="#chevrons-up"></use>
                      </svg>
                    </div>
                  </div>
                  <div class="detail" ng-if="playlist.length > 0">
                    <div class="ctrl">
                      <a
                        ng-click="showDialog(0, currentPlaying)"
                        title="{{_ADD_TO_PLAYLIST}}"
                      >
                        <span class="icon li-songlist"></span>
                      </a>
                      <a
                        title="{{ settings.playmode | playmode_title }}(s)"
                        ng-click="changePlaymode()"
                      >
                        <span
                          ng-show="settings.playmode == 0"
                          class="icon li-loop"
                        ></span>
                        <span
                          ng-show="settings.playmode == 1"
                          class="icon li-random-loop"
                        ></span>
                        <span
                          ng-show="settings.playmode == 2"
                          class="icon li-single-cycle"
                        ></span>
                      </a>
                    </div>

                    <div class="title">
                      <span
                        ng-if="currentPlaying.source === 'xiami'"
                        style="color: orange; font-size: medium"
                        >⚠️ </span
                      >{{ currentPlaying.title }}
                    </div>
                    <div class="more-info">
                      <div class="current">{{ currentPosition }}</div>
                      <div class="singer">
                        <a ng-click="showPlaylist(currentPlaying.artist_id)"
                          >{{ currentPlaying.artist }}</a
                        >
                        -
                        <a ng-click="showPlaylist(currentPlaying.album_id)"
                          >{{ currentPlaying.album }}</a
                        >
                      </div>
                      <div class="total">{{ currentDuration }}</div>
                    </div>
                    <div class="playbar">
                      <div
                        class="barbg"
                        id="progressbar"
                        mode="play"
                        draggable-bar=""
                      >
                        <div class="cur" ng-style="{width : myProgress + '%' }">
                          <span class="btn"><i></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right-control">
                  <div class="playlist-toggle">
                    <span
                      ng-click="togglePlaylist()"
                      class="icon li-list"
                    ></span>
                  </div>
                  <div class="volume-ctrl" volume-wheel="">
                    <span
                      class="icon"
                      ng-class="mute? 'li-mute': 'li-volume'"
                      ng-click="toggleMuteStatus()"
                    ></span>
                    <div class="m-pbar volume">
                      <div
                        class="barbg"
                        id="volumebar"
                        mode="volume"
                        draggable-bar=""
                      >
                        <div class="cur" ng-style="{width : volume + '%' }">
                          <span class="btn"><i></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div ng-if="!isChrome" class="lyric-toggle">
                    <div
                      ng-click="openLyricFloatingWindow(true)"
                      class="lyric-icon"
                      ng-class="{'selected': enableLyricFloatingWindow}"
                    >
                      词
                    </div>
                  </div>
                </div>
                <div
                  class="menu-modal"
                  ng-class="{slideup: !menuHidden}"
                  ng-click="togglePlaylist()"
                ></div>
                <div class="menu" ng-class="{slideup: !menuHidden}">
                  <div class="menu-header">
                    <span class="menu-title"
                      >{{_TOTAL_SONG_PREFIX}}{{playlist.length}}{{_TOTAL_SONG_POSTFIX}}</span
                    >
                    <a class="add-all" ng-click="showDialog(0, playlist)">
                      <span
                        class="icon li-songlist"
                        ng-click="togglePlaylist()"
                      ></span>
                      <span>{{_ADD_TO_PLAYLIST}}</span></a
                    >
                    <a class="remove-all" clear-playlist=""
                      ><span
                        class="icon li-del"
                        ng-click="togglePlaylist()"
                      ></span
                      ><span>{{_CLEAR_ALL}}</span></a
                    >

                    <a class="close" ng-click="togglePlaylist()"
                      ><svg class="feather">
                        <use href="#x"></use>
                      </svg>
                    </a>
                  </div>
                  <ul class="menu-list">
                    <li
                      id="song{{ song.id }}"
                      ng-repeat="song in playlist track by $index"
                      ng-class="{ playing: currentPlaying.id == song.id }"
                      ng-mouseenter="playlist_highlight=true"
                      ng-mouseleave="playlist_highlight=false"
                      ng-class-odd="'odd'"
                      ng-class-even="'even'"
                      draggable="true"
                      drag-drop-zone
                      drag-zone-object="song"
                      drag-zone-title="song.title"
                      sortable="true"
                      drag-zone-type="'application/listen1-song'"
                      drop-zone-ondrop="onCurrentPlayingSongDrop(song, arg1, arg2, arg3)"
                    >
                      <div class="song-status-icon">
                        <svg
                          class="feather play"
                          ng-show="currentPlaying.id == song.id"
                        >
                          <use href="#play"></use>
                        </svg>
                      </div>
                      <div
                        class="song-title"
                        ng-class="song.disabled? 'disabled':'' "
                      >
                        <a play-from-playlist="song"
                          ><span
                            ng-if="song.source === 'xiami'"
                            style="
                              color: orange;
                              border-radius: 12px;
                              border: solid 1px;
                              padding: 0 4px;
                            "
                            >⚠️ 🦐</span
                          >{{ song.title }}</a
                        >
                      </div>
                      <div class="song-singer">
                        <a
                          ng-click="showPlaylist(song.artist_id); togglePlaylist();"
                          >{{ song.artist }}</a
                        >
                      </div>
                      <div class="tools">
                        <span
                          remove-from-playlist="song"
                          data-index="{{$index}}"
                          ng-show="playlist_highlight"
                          class="icon li-del"
                        ></span>
                        <span
                          open-url="song.source_url"
                          ng-show="playlist_highlight"
                          class="icon li-link"
                        ></span>
                      </div>
                      <!-- <div class="song-time">00:00</div> -->
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
